	<template>
		<view class="player">
			<!-- <web-view style="height: 0;" src="/hybrid/html/player.html">
				
			</web-view> -->
			<live-player src="rtmp://183.6.6.99:11935/live/aircraft_013" autoplay @statechange="statechange" @error="error"
				style="width:100%; height: 368rpx;" />
			<view class="player-icon">
				<view class="full-screen">
					<image src="@/static/svg/full-screen.svg" mode=""></image>
				</view>
				<view class="refresh">
					<image src="@/static/svg/refresh.svg" mode=""></image>
				</view>
			</view>
		</view>
	</template>

	<script>
		export default {
			props: ["url"],
			methods: {
				statechange(e) {
					console.log('live-player code:', e.detail.code)
				},
				error(e) {
					console.error('live-player error:', e.detail.errMsg)
				}
			}
		}
	</script>

	<style lang="scss">
		.player {
			height: 368rpx;
			width: 100%;
			background-color: $color-gray;
			position: relative;

			.player-icon {
				position: absolute;
				bottom: 20rpx;
				right: 30rpx;
				display: flex;
				align-items: center;
				width: 160rpx;
				justify-content: space-between;

				.full-screen,
				.refresh {
					width: 70rpx;
					height: 70rpx;
					background-color: white;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					>image {
						width: 60%;
						height: 60%;
					}
				}
			}
		}
	</style>